<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Multi Streams Example — Networked-Aframe</title>
    <meta name="description" content="Multi Streams Example — Networked-Aframe" />

    <script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js"></script>
    <script src="/easyrtc/easyrtc.js"></script>
    <script src="/dist/networked-aframe.js"></script>
    <script>
      // see issue https://github.com/networked-aframe/networked-aframe/issues/267
      NAF.schemas.getComponentsOriginal = NAF.schemas.getComponents;
      NAF.schemas.getComponents = (template) => {
        if (!NAF.schemas.hasTemplate('#avatar-template')) {
          NAF.schemas.add({
            template: '#avatar-template',
            components: [
              {
                component: 'position',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.001)
              },
              {
                component: 'rotation',
                requiresNetworkUpdate: NAF.utils.vectorRequiresUpdate(0.5)
              }
            ]
          });
        }
        const components = NAF.schemas.getComponentsOriginal(template);
        return components;
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-randomizer-components@3.0.2/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aframe-environment-component@1.5.0/dist/aframe-environment-component.min.js"></script>
    <script src="/js/spawn-in-circle.component.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
  </head>
  <body>
    <a-scene
      networked-scene="
      room: basic-multi-streams;
      debug: true;
      adapter: easyrtc;
      audio: false;
      video: true;
    "
    >
      <a-assets>
        <!-- Templates -->

        <!-- Avatar -->
        <template id="avatar-template">
          <a-entity class="avatar">
            <a-plane
              color="#FFF"
              width="4"
              height="3"
              position="0 .6 0"
              material="side: back"
              networked-video-source
            ></a-plane>
            <a-plane
              color="#FFF"
              width="2"
              height="1"
              position="0 .7 -0.001"
              rotation="0 -180 0"
              material="side: front"
              networked-video-source="streamName: screen"
            ></a-plane>
          </a-entity>
        </template>

        <!-- /Templates -->
      </a-assets>

      <a-entity id="rig">
        <a-entity
          id="player"
          networked="template:#avatar-template;attachTemplateToLocal:false;"
          camera
          position="0 1.6 0"
          spawn-in-circle="radius:3"
          wasd-controls
          look-controls
        >
          <a-sphere class="head" visible="false" random-color></a-sphere>
        </a-entity>
      </a-entity>

      <a-entity environment="preset:arches"></a-entity>
    </a-scene>

    <div class="actions">
      <button id="camera-btn" type="button" class="button">Hide Camera</button>
      <button id="screen-btn" type="button" class="button">Share screen</button>
    </div>

    <script>
      // Camera status
      let cameraEnabled = true;
      // Camera button element
      const cameraBtnEle = document.getElementById('camera-btn');

      // Screen share status
      let screenEnabled = false;
      // Screen share button element
      const screenBtnEle = document.getElementById('screen-btn');

      // On mobile remove elements that are resource heavy
      const isMobile = AFRAME.utils.device.isMobile();

      if (isMobile) {
        const particles = document.getElementById('particles');
        particles.parentNode.removeChild(particles);
      }

      // Called by Networked-Aframe when connected to server
      function onConnect() {
        console.log('onConnect', new Date());

        // Handle camera button click (Off and On)
        cameraBtnEle.addEventListener('click', function () {
          NAF.connection.adapter.enableCamera(!cameraEnabled);
          cameraEnabled = !cameraEnabled;
          cameraBtnEle.textContent = cameraEnabled ? 'Hide Camera' : 'Show Camera';
        });

        // Handle screen button click (Off and On)
        screenBtnEle.addEventListener('click', function () {
          if (screenEnabled) {
            NAF.connection.adapter.removeLocalMediaStream('screen');
            screenEnabled = false;
            screenBtnEle.textContent = 'Share screen';
          } else {
            navigator.mediaDevices.getDisplayMedia().then((stream) => {
              NAF.connection.adapter.addLocalMediaStream(stream, 'screen');
              stream.getVideoTracks().forEach((track) => {
                track.addEventListener(
                  'ended',
                  () => {
                    NAF.connection.adapter.removeLocalMediaStream('screen');
                    screenEnabled = false;
                    screenBtnEle.textContent = 'Share screen';
                  },
                  { once: true }
                );
              });
              screenEnabled = true;
              screenBtnEle.textContent = 'Stop Screen';
            });
          }
        });
      }
    </script>
  </body>
</html>
